Implement customizable transition animation duration setting #2321

sarthak-19 · 2026-01-04T14:22:12Z

Part of a polishing issue : #2317

Summary

This PR implements the transition animation duration setting that was previously added to the UI but wasn't functional. The duration setting now properly affects view transitions on both the frontend and WordPress admin area.

…eal-time preview

codecov · 2026-01-04T14:30:34Z

Codecov Report

❌ Patch coverage is 5.66038% with 50 lines in your changes missing coverage. Please review.
✅ Project coverage is 69.39%. Comparing base (ce1b405) to head (07de264).
⚠️ Report is 226 commits behind head on trunk.

Files with missing lines	Patch %	Lines
plugins/view-transitions/includes/settings.php	3.84%	50 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##            trunk    #2321      +/-   ##
==========================================
+ Coverage   68.85%   69.39%   +0.54%     
==========================================
  Files          90       90              
  Lines        7612     7753     +141     
==========================================
+ Hits         5241     5380     +139     
- Misses       2371     2373       +2

Flag	Coverage Δ
multisite	`69.39% <5.66%> (+0.54%)`	⬆️
single	`35.39% <0.00%> (-0.08%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

westonruter · 2026-01-07T00:02:32Z

Comment from @sarthak-19 in Slack:

I raised a draft PR because currently I was unsure of what more are we expecting to be delivered in this task for polishing, since the issue mentioned of Add support for customizing transition animation duration
But this was already added in the UI as well.
What I did for potential polishing items are :

Added validation bounds - Duration is now clamped between 100ms and 5000ms with proper input validation

Applied duration to admin - Admin view transitions now also respect the duration setting

Added real-time preview - The seconds equivalent updates dynamically as you type in the > milliseconds field.

Exposed in REST API - Added default_transition_animation_duration to the REST API schema

Added unit tests - Tests for duration sanitization, clamping, and the injection function

adamsilverstein · 2026-01-12T21:37:15Z

plugins/view-transitions/includes/admin.php

 	?>
 <style>
 	@view-transition { navigation: auto; }
+	::view-transition-group(*) { animation-duration: <?php echo esc_html( (string) $duration_seconds ); ?>s; }


esc_attr is probably more appropriate here

Actually, neither is appropriate, as I've come to find. The contents of STYLE are the same as SCRIPT in that they are “raw text”. Entities are not processed.

In any case, since the value is an integer anyway, we can ensure proper escaping via:

Suggested change

::view-transition-group(*) { animation-duration: <?php echo esc_html( (string) $duration_seconds ); ?>s; }

::view-transition-group(*) { animation-duration: <?php echo (int) $duration_seconds; ?>s; }

Right, that is best. esc_html felt too broad, the int cast is perfect.

westonruter · 2026-01-13T01:58:55Z

plugins/view-transitions/includes/settings.php

+		?>
+		<input
+			type="number"
+			id="<?php echo $field_id; ?>"


Suggested change

id="<?php echo $field_id; ?>"

id="<?php echo esc_attr( $args['label_for'] ); ?>"

I had to use esc_attr( $args['label_for'] ) multiple times that's why I used $field_id variable like :

$field_id = esc_attr( $args['label_for'] );

Is there something wrong with this approach ?
Since I'm using field_id like :

 <?php printf( /* translators: %s: duration in seconds wrapped in a span for dynamic update */ esc_html__( 'ms (%s)', 'view-transitions' ), '' . esc_html( (string) $seconds ) . 's' ); ?> <?php wp_print_inline_script_tag( sprintf( 'document.getElementById( %s ).addEventListener( "input", function( e ) { document.getElementById( %s ).textContent = ( parseInt( e.target.value, 10 ) / 1000 ) + "s"; } );', wp_json_encode( $field_id ), wp_json_encode( $field_id . '-seconds' ) ) );

Yeah, better to not do that. It's better to always use an escaping function wherever a variable is being printed. While there would be no vulnerability the way you have it now, at some point in the future something could change to that variable to make it vulnerable. Also, every time a developer looks at the printing they'd have to go up to make sure it had been escaped.

Ohh okay, make sense, I'll keep this in mind moving forward, I was just trying to follow DRY design principle!!

plugins/view-transitions/includes/settings.php

westonruter · 2026-01-13T02:00:33Z

plugins/view-transitions/includes/settings.php

+			printf(
+				/* translators: %s: duration in seconds wrapped in a span for dynamic update */
+				esc_html__( 'ms (%s)', 'view-transitions' ),
+				'<span id="' . $field_id . '-seconds">' . esc_html( (string) $seconds ) . 's</span>'


Suggested change

'' . esc_html( (string) $seconds ) . 's'

'' . esc_html( (string) $seconds ) . 's'

Again, same doubt : #2321 (comment)

westonruter · 2026-01-13T02:01:58Z

plugins/view-transitions/includes/settings.php

+				/* translators: %s: duration in seconds wrapped in a span for dynamic update */
+				esc_html__( 'ms (%s)', 'view-transitions' ),
+				'<span id="' . $field_id . '-seconds">' . esc_html( (string) $seconds ) . 's</span>'
+			);


I'm not sure we need the seconds? Can't we just have the milliseconds?

We can have, but as a part of polishing feature it can be a simple yet effective thing from end user perspective don't you think ?

I mean I'm open to discussion here, can remove if it's overkill.

I think it can be removed. The UI here is not going to be proposed for core, so it's for power users of the plugin. They already have to be comfortable with CSS selectors, so they should be comfortable with milliseconds as well.

Sure then I'll remove this and push the updated changes.

westonruter · 2026-01-13T02:02:22Z

plugins/view-transitions/includes/settings.php

+		wp_print_inline_script_tag(
+			sprintf(
+				'document.getElementById( %s ).addEventListener( "input", function( e ) { document.getElementById( %s ).textContent = ( parseInt( e.target.value, 10 ) / 1000 ) + "s"; } );',
+				wp_json_encode( $field_id ),
+				wp_json_encode( $field_id . '-seconds' )
+			)
+		);


Per above, I don't think we need this.

Suggested change

wp_print_inline_script_tag(

sprintf(

'document.getElementById( %s ).addEventListener( "input", function( e ) { document.getElementById( %s ).textContent = ( parseInt( e.target.value, 10 ) / 1000 ) + "s"; } );',

wp_json_encode( $field_id ),

wp_json_encode( $field_id . '-seconds' )

)

);

westonruter · 2026-01-13T02:04:37Z

plugins/view-transitions/includes/settings.php

+	} elseif ( 'number' === $type ) {
+		$seconds  = (int) $value / 1000;


This is a general field output for number but it presumes the number value is going to be seconds or time. That doesn't seem ideal. Note how the checkbox condition above is agnostic to what the setting is for.

westonruter · 2026-01-13T02:04:58Z

plugins/view-transitions/includes/settings.php

+			min="<?php echo esc_attr( (string) PLVT_MIN_ANIMATION_DURATION ); ?>"
+			max="<?php echo esc_attr( (string) PLVT_MAX_ANIMATION_DURATION ); ?>"


These should come from the $args

github-actions · 2026-01-18T16:25:27Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @sarthak.jaiswal@rtCamp.com.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: sarthak.jaiswal@rtCamp.com.

Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: sarthak-19 <sarthak8858@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

westonruter · 2026-01-18T17:08:04Z

plugins/view-transitions/includes/settings.php

 	exit; // Exit if accessed directly.
 }
+
+


Suggested change

westonruter · 2026-01-18T17:18:34Z

Another polishing idea: there could be validation added to the input fields for the CSS selectors. Maybe this would be as simple as a pattern attribute added to each with a regex that would roughly match a valid regex. A more sophisticated validation would be to use JS to put the selector into a call to document.querySelector. If it errors, then we'd know the selector is invalid and we could call setCustomValidity() on the input element. I don't think there would be any security issue introduced by running user input into a JS function like that.

Implement transition animation duration setting with validation and r…

4970c8d

…eal-time preview

westonruter added the [Plugin] View Transitions Issues for the View Transitions plugin label Jan 4, 2026

westonruter added this to the view-transitions n.e.x.t milestone Jan 4, 2026

westonruter added the [Type] Enhancement A suggestion for improvement of an existing feature label Jan 4, 2026

westonruter modified the milestones: view-transitions 1.1.2, view-transitions n.e.x.t Jan 6, 2026

adamsilverstein reviewed Jan 12, 2026

View reviewed changes

westonruter reviewed Jan 13, 2026

View reviewed changes

plugins/view-transitions/includes/settings.php Outdated Show resolved Hide resolved

westonruter reviewed Jan 13, 2026

View reviewed changes

Addressed feedback changes and added unit test for better coverage

07de264

sarthak-19 marked this pull request as ready for review January 18, 2026 16:25

sarthak-19 requested a review from felixarntz as a code owner January 18, 2026 16:25

Fixed phpstan errors

58eee13

westonruter reviewed Jan 18, 2026

View reviewed changes

plugins/view-transitions/includes/settings.php

exit; // Exit if accessed directly.

}

Copy link

Member

westonruter Jan 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

This comment was marked as resolved.

Sign in to view

	::view-transition-group(*) { animation-duration: <?php echo esc_html( (string) $duration_seconds ); ?>s; }
	::view-transition-group(*) { animation-duration: <?php echo (int) $duration_seconds; ?>s; }

	id="<?php echo $field_id; ?>"
	id="<?php echo esc_attr( $args['label_for'] ); ?>"

	'<span id="' . $field_id . '-seconds">' . esc_html( (string) $seconds ) . 's</span>'
	'<span id="' . esc_attr( $args['label_for'] . '-seconds' ) . '">' . esc_html( (string) $seconds ) . 's</span>'

		} elseif ( 'number' === $type ) {
		$seconds = (int) $value / 1000;

		min="<?php echo esc_attr( (string) PLVT_MIN_ANIMATION_DURATION ); ?>"
		max="<?php echo esc_attr( (string) PLVT_MAX_ANIMATION_DURATION ); ?>"

Implement customizable transition animation duration setting #2321

Are you sure you want to change the base?

Implement customizable transition animation duration setting #2321

Conversation

sarthak-19 commented Jan 4, 2026

Summary

Uh oh!

codecov bot commented Jan 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

westonruter commented Jan 7, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

westonruter Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sarthak-19 Jan 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

westonruter Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 18, 2026

Unlinked Accounts

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

westonruter commented Jan 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

codecov bot commented Jan 4, 2026 •

edited

Loading

westonruter Jan 13, 2026 •

edited

Loading

sarthak-19 Jan 18, 2026 •

edited

Loading

westonruter Jan 13, 2026 •

edited

Loading